<template>
    <el-menu
    :default-active="this.$route.fullPath"
    class="el-menu-vertical-demo asideMenu"
    background-color="#2481B8"
    text-color="#fff"
    active-text-color="#fff"
    :unique-opened="true"
    :collapse="isCollapse"
    :collapse-transition="false"
    :router="true">
        <el-menu-item index="/streamer" v-if="!showGroup">
            <i class="icon-third icon-third-icon-"></i>
            <span slot="title">分析服务</span>
        </el-menu-item>
        <el-submenu index="/streamer" v-else>
            <template slot="title">
                <i class="icon-third icon-third-icon-"></i>
                <span>分析服务</span>
            </template>
            <el-menu-item-group v-for="(item,itemIndex) in menuData" :key="itemIndex">
                <template slot="title">
                    <i class="icon-third" :class="item.iconClass"></i>
                    <span>{{item.text}}</span>
                </template>
                <el-menu-item class="contentText" :title="data.text" :index="'/streamer?id='+data.service_guid" v-for="(data,dataIndex) in item.itemdata" 
                :key="dataIndex">
                    <i class="icon-third" :class="data.iconClass"></i>
                    <span>{{data.text}}</span>
                </el-menu-item>
            </el-menu-item-group>    
        </el-submenu>
        <el-menu-item index="/history">
            <i class="icon-third icon-third-lishishuju"></i>
            <span slot="title">历史事件</span>
        </el-menu-item>
        <el-menu-item index="/statistics">
            <i class="icon-third icon-third-icon1"></i>
            <span slot="title">统计数据</span>
        </el-menu-item>
        <el-submenu index="/settings" v-if="getUserAuthority" >
            <template slot="title">
                <i class="icon-third icon-third-shezhi"></i>
                <span>系统配置</span>
            </template>

            <el-menu-item index="/settings/user">
                <i class="icon-third icon-third-yonghubangding-copy"></i>
                <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/settings/scheme">
                <i class="icon-third icon-third-fanganchaxunjitiaozheng"></i>
                <span>方案管理</span>
            </el-menu-item>
            <el-menu-item index="/settings/stream_service">
                <i class="icon-third icon-third-bangding1"></i>
                <span>分析服务管理</span>
            </el-menu-item>
        </el-submenu>
        
    </el-menu>
</template>
<script>
    import util from '../util/util'
	export default {
		data() {
			return {
                menuData:[],
                defaultActiveId:''
            }
        },
        props:{
            isCollapse:{
                type:Boolean,
                default:false
            }
        },
        mounted(){
            this.fetchData();
        },
        computed:{
            getState(){
                return this.$store.state.updateServiceData;
            },
            getUserAuthority(){
                return this.$store.state.userInfo?(this.$store.state.userInfo.authority==9?true:false):false;
            },
            showGroup(){
                return this.menuData.length>0?true:false
            }
        },
        watch:{
            getState: function(newState){
                if(newState) this.fetchData();			
            }
        },
        methods:{
            fetchData(){
                this.$api.service.serviceList({group_by_fun:true}).then(response => {
					if(response.data.code=="6000"){
						let data;
						try {	
                            data= response.data.data.services;
                            this.processData(data);
						} catch (error) {
							return false;
						}
					}else{
						this.$message({
                            message: util.getErrorInfo(response.data.code),
                            type: 'error'
                        });
					}
				}).then(()=>{
                    if((this.$route.path=="/streamer" || this.$route.path=="/") && !this.$route.query.id){
                        this.$router.push("/streamer?id="+this.defaultActiveId);
                    }     
                })
			},
			processData(data){
                let tmpData = [];
				for(var i=0;i<data.length;i++){
					let streamobj = {};
					let tmp = data[i]["itemdata"];
					streamobj["text"] = data[i]["function_name"];
					streamobj["iconClass"] = util.getIconClass(data[i]["function_name"]);
					streamobj["itemdata"] = [];
					for(var j=0;j<tmp.length;j++){
						let itemobj = {};
						itemobj["text"] = tmp[j]["channel_name"];  //tmp[j]["source_url"].split("@")[1];
                        itemobj["service_guid"] = tmp[j]["service_guid"];
                        if(j==0) this.defaultActiveId = tmp[j]["service_guid"];
						itemobj["iconClass"] = "icon-third-jiankongfuwu";
						streamobj["itemdata"].push(itemobj); 
					}
					tmpData.push(streamobj);
				}
                this.menuData = tmpData;
                // console.log(this.menuData)
			}
        }
	}

</script>

<style scoped lang="scss">
@import "../assets/basic.scss";
    // .el-menu-vertical-demo:not(.el-menu--collapse) {
    //     // width: 200px;
    //     min-height: 400px;
    // }
    .el-menu-item i,.el-submenu__title i{
        color:#fff;
    }
    .el-menu-item.is-active i{
        color: #fff;
    }
    .asideMenu{
        margin-top: 20px;
        border: none;
        height: calc(100vh - 84px);
        overflow-y: auto;
    }
    .contentText{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>